<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/useEcharts'
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String,
      default: '400px',
    },
    height: {
      type: String,
      default: '400px',
    },
    chartDetailData: {
      type: Object,
      default: () => ({}),
    },
  })
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  function init() {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      title: {
        // text: '评课次数分析表',
      },
      color: ['#49F756', '#FE606D', '#5066E1'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '14%',
        containLabel: true,
      },
      radar: {
        indicator: [
          { name: '教学能力', max: 600 },
          { name: '准点率', max: 600 },
          { name: '课件质量', max: 600 },
          { name: '课程活跃度', max: 600 },
          { name: '教学质量', max: 600 },
          { name: '早退率', max: 600 },
        ],
      },
      series: [
        {
          name: '被听评课次数分析',
          type: 'radar',
          data: [
            {
              value: props.chartDetailData.map((v) => v.human1),
              name: '名称1',
            },
          ],
        },
      ],
    })
  }
  watch(
    () => props.chartDetailData,
    (val) => {
      console.log(val)
      init()
    },
    {
      immediate: true,
    }
  )
</script>
